<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 50px;
				background: #f00;
				position: absolute;
				top:0;
				left: 0;
				animation-name: sport;
				animation-duration: 5s;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: #00f;
				margin: 100px auto;
				
				animation-name: myRotate;
				animation-duration: 4s;
				animation-delay: 2s;
				
				/* animation-fill-mode: both; */
			}
			
			.box2 img{
				width: 200px;
				height: 200px;
			}
			
			@keyframes sport{
				0%{
					top:0;
					left:0;
				}
				25%{
					top:0;
					left: 300px;
				}
				50%{
					top:300px;
					left: 300px;
				}
				75%{
					top:300px;
					left: 0;
				}
				100%{
					top:0;
					left:0;
				}
			}
			
			@keyframes myRotate{
				0%{
					transform: rotate(30deg);
				}
				25%{
					transform: rotate(50deg);
				}
				50%{
					transform: rotate(90deg);
				}
				75%{
					transform: rotate(110deg);
				}
				100%{
					transform: rotate(130deg);
				}
				
			}
		</style>
	</head>
	<body>
		<!-- 
		 围绕矩形跑一圈
		 利用百分比建立多段动画(而不是from to)
		 调整百分比大小可控制每一段动画的速度
		 
		animation-fill-mode作用:
		指定动画等待状态和结束状态的样式
		取值:
		none: 不做任何改变
		forwards: 让元素结束状态保持动画最后一帧的样式
		backwards: 让元素等待状态的时候显示动画第一帧的样式
		both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式		 
		 -->
		 <div class="box1"></div>
		 
		 <!-- 旋转动画 -->
		 <div class="box2">
			 <img src="img/heart.png" alt="">
		 </div>
	</body>
</html>
